import React, {useRef} from "react";
import {runAnimate} from "./animate";

export default function Animate(props) {
    const element = useRef();
    const container = useRef();



    return (<div>
        <h2>动画组件</h2>

        <button type={'button'} className={'btn btn-primary'} onClick={() => {

            runAnimate({
                element: element.current,
                startPosition: {
                    left: 100,
                    top: 100
                },
                targetPosition: {
                    left: 1000,
                    top: 1000
                },
                duration: 1000,
                callback: () => {
                    console.log('执行完了')
                }
            })

        }
        }>执行动画
        </button>

        <table className="table" ref={element}>
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>

        <div className={'container'} ref={container}>

        </div>
    </div>)
}